<template>
  <div class="fodder-main">
    <h2>图片管理</h2>

    <!-- 主体 -->
    <div class="container">
      <!-- 搜索栏 -->
      <el-card class="box-card card" shadow>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-input
              v-model="search.title"
              placeholder="请输入图片名"
              size="small"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="6" :offset="2">
            <el-button size="small" @click="resetSearch">重置</el-button>
            <el-button type="primary" size="small" @click="goSearch"
              >查找</el-button
            >
          </el-col>
        </el-row>
      </el-card>

      <!-- 图片上传按钮 -->
      <el-upload
        ref="upload"
        class="upload"
        :headers="header"
        :action="serveHost + '/admin/xy/upload/uploadImg'"
        :on-success="onUpload"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>

      <!-- 图片列表展示 -->
      <div class="list card" v-loading="loading">
        <el-row :gutter="20">
          <el-col
            :span="6"
            v-for="item in uploadList"
            :key="item.id"
            class="single"
          >
            <el-card>
              <img
                :src="serveHost + '/' + item.dir + '/' + item.fileName"
                class="image"
                @click="openDialog(item)"
              />
              <div>
                <div class="top">
                  <div class="text">
                    <div v-if="item.id != editId" @click="openEdit(item.id)">
                      {{
                        item.title == ""
                          ? "未命名"
                          : item.title == null
                          ? "未命名"
                          : item.title
                      }}
                    </div>
                    <el-input
                      v-else
                      v-model="item.title"
                      size="small"
                      @blur="cancelEdit"
                      @keyup.enter.native="updateTitle(item)"
                      @keyup.esc.native="cancelEdit"
                    />
                  </div>
                  <div class="bottom clearfix right">
                    <el-button
                      type="danger"
                      class="button"
                      size="small"
                      @click="delImg(item.id)"
                      >删除</el-button
                    >
                  </div>
                </div>
                <time class="time">{{ item.addTime }}</time>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 分页器 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="page.total"
        style="text-align: center"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 查看大图弹窗 -->
    <el-dialog title="大图" :visible.sync="dialog" :before-close="handleClose">
      <el-image
        :src="tempImg"
        class="image"
        style="margin: 0 auto; display: block"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  uploadList as uploadListApi,
  delImg as delImgApi,
  updateTitle as updateTitleApi,
} from "@/api/repos/fodder";
import settingsFile from "@/settings";
import { getToken } from "@/utils/myAuth";

export default {
  name: "ReposFodder",
  data() {
    return {
      serveHost: settingsFile.host,
      loading: false,
      dialog: false,
      editId: "",
      uploadList: [],
      fileList: [],
      search: {},
      tempImg: "",
      tempTitle: "",
      page: {
        start: 1,
        limit: 12,
        total: 0,
      },
    };
  },
  created() {
    // 图片列表初始化
    this.getUploadList();
  },
  methods: {
    getUploadList() {
      // 开启loading
      this.loading = true;
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };
      uploadListApi(params).then((res) => {
        // console.log(res);
        this.uploadList = res.data.list;
        this.page.total = res.data.totalRow;
        this.loading = false;
      });
    },
    onUpload(response, file, fileList) {
      // console.log(response);
      // 上传成功之后提示,并删除进度条
      this.$message.success("上传成功!");
      this.getUploadList();
      this.$refs.upload.clearFiles();
    },
    delImg(id) {
      this.$confirm("是否删除该图片?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delImgApi({ id }).then((res) => {
            console.log(res);
            this.getUploadList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openDialog(item) {
      this.dialog = true;
      this.tempImg = this.serveHost + "/" + item.dir + "/" + item.fileName;
    },
    updateTitle(item) {
      var obj = {
        title: item.title,
        id: item.id,
      };
      updateTitleApi(obj).then((res) => {
        console.log(res);
        this.editId = "";
      });
    },
    handleClose(done) {
      done();
    },
    handleCurrentChange(val) {
      this.page.start = val;
      this.getUploadList();
    },
    openEdit(id) {
      this.editId = id;
    },
    cancelEdit() {
      this.editId = "";
      this.getUploadList();
    },
    goSearch() {
      this.getUploadList();
    },
    resetSearch() {
      this.search = {};
      this.getUploadList();
    },
  },
  computed: {
    header() {
      return {
        "bufan-token": getToken(),
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.fodder-main {
  padding: 0 20px;
  margin-bottom: 50px;
  .card {
    margin: 10px 20px;
  }
  .upload {
    margin: 20px 20px;
  }
  .single {
    margin-bottom: 20px;
    text-align: center;

    .image {
      display: block;
      width: 100%;
      height: 240px;
    }
    .right {
      padding-top: 10px;
      text-align: right;
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
